<template>
    <div class="choice-container">
    
        <div class="header-box" @click="change">
            <i-row>
                <i-col span='22'>
                    选择条件：
                    <div class="select-text"> {{currentSchool}} {{currentGrade}} {{currentClass}} {{currentCate}} </div>
                </i-col>
                <i-col span='2'>
                    <div class="icon">
                        <img src="../../../static/images/edit.png" alt="">
                    </div>
                    
                </i-col>
            </i-row>
        </div>
        <div class="diverter"></div>

        <div class="list-container">            
             <i-panel>
                <div class="item" v-for='teacher in teacherList' :key='teacher.id'>                   
                    <!-- // 第一行 -->
                    <i-row>
                        <i-col span='8'>
                            <div class="pic">
                                <img :src="teacher.headImg" alt="">
                            </div>
                        </i-col>
                        <i-col span='16'>
                            <div class="info">
                                <div class="name">姓名：{{teacher.name}}</div>
                                <div class="star">
                                    <i-rate  count="5" :value="teacher.coachScore">{{teacher.coachScore}}</i-rate>
                                </div>
                                <div class="desc"> {{teacher.style}}</div>
                            </div>
                        </i-col>
                    </i-row>
                    <!-- 按钮行 -->
                    <i-row>
                    <i-col span='8'>&nbsp;</i-col>
                        <i-col span='16'>
                            <i-row>
                                <i-col span='12'>
                                    <button @click="showDetail" plain type="default" shape="circle"  size="mini">查看详情</button> 
                                </i-col>
                                <i-col span='12'>
                                     <button @click="choose" plain type="default" shape="circle"  size="mini">选择TA</button>                                    
                                </i-col>
                            </i-row>
                            
                            
                        </i-col>
                    </i-row>
                 
                </div>
            </i-panel>
        </div>

        <!-- 选择框 -->
        <i-modal title='条件筛选' :visible="visible1" @ok="handleOk" @cancel="handleCancel" class='modal-box' >
            <div v-if="schoolindex>-1">
                <picker @change="schoolChange" :value="schoolindex.name" range-key='name' :range="schoolList">
                    <div class="picker" >驾校选择：{{schoolList[schoolindex].name}}  
                        <i-icon type="unfold" size="14" style="position:absolute;right:10px;" color="#80848f" />
                   </div>
                </picker>
            </div>
            <div v-if="gradeindex>-1">
                <picker @change="gradeChange" :value="gradeindex" range-key='categoryName'  :range="gradearray">
                    <div class="picker">驾照等级选择：{{gradearray[gradeindex].categoryName}}     
                        <i-icon type="unfold" size="14" style="position:absolute;right:10px;" color="#80848f" />
                    </div>
                </picker>
            </div>
            <div v-if="classindex>-1">
                <picker @change="classChange"  :value="classindex" range-key='className' :range="classarray">
                    <div class="picker">班级选择：{{classarray[classindex].className}}     
                        <i-icon type="unfold" size="14" style="position:absolute;right:10px;"  color="#80848f" />
                    </div>
                </picker>
            </div>
            <div v-if="index>-1">
                <picker @change="bindPickerChange" :value="index" :range="array">
                    <div class="picker">科目级别选择：{{array[index]}}    
                        <i-icon type="unfold" size="14" style="position:absolute;right:10px;"  color="#80848f" />
                    </div>
                </picker>
            </div>
        </i-modal>
    </div>
</template>

<script>
import { get } from "../../utils";
export default {
    data(){
        return {
            visible1: false,

            
            schoolindex: -1, // 选择学校的index
            gradeindex:-1, // 选择驾照等级的index
            classindex:-1, //班级
            index:0, //科目

            array: ['科目一', '科目二', '科目三', '科目四'], // 科目
            // selec
            schoolList:[], // 所有的学校
            gradearray:[], // 指定的学校的驾照等级
            teacherList:[], // 所有的老师
            classarray:[], // 班级

            currentSchool:'全部学校',
            currentGrade:'全部等级',
            currentClass:'全部班级',
            currentCate:'全部科目'
            

        }
    },
    mounted(){

        // 加载驾校列表  

        // '/wxcx/front/coach/schoolList'
        const data = get("/wxcx/front/coach/schoolList", {
              appId: 'wxeb2c5385d297112c'
            }).then((result) => {
              //_this.getAddressList();
               console.log(result)
               if(result.code==200){
                   this.schoolList = result.data
               }
            });
        const teacherdata = get('/wxcx/front/coach/info',{
            appId:'wxeb2c5385d297112c',
            page:1,
            size:10
        }).then(result=>{
            if(result.code==200){
                this.teacherList = result.data.content;
                this.schoolindex = 0;
                this.index = 0;
            }
        })
        const gradeData = get('/wxcx/front/coach/selectCategory',{
            appId:'wxeb2c5385d297112c',
            schoolId:1
        }).then(result=>{
            
            if(result.code == 200){
                this.gradearray = result.data
                this.gradeindex = 0;
            }
        })
        const classData = get('/wxcx/front/coach/selectClass',{
            appId:'wxeb2c5385d297112c',
            schoolId:1,
            categoryId:5
        }).then(result=>{
            if(result.code ==200){
                this.classarray = result.data
                if(this.classarray.length>0)
                    this.classindex = 0;
            }
        })
        // //GetPartTeachers
        
        

    },
    methods:{
        change(){
            this.visible1 = true;
        },
        schoolChange(e){
            console.log('学校改变了',e)

        },
        gradeChange(e){
            console.log('等级改变了',e)
        },
        classChange(e){
            console.log('班级变化了',e)
        },
        showDetail(){
            console.log('展示详情')
        },
        choose(){
            console.log('选择它')
        },
        handleCancel(e){

            console.log('选择了取消按钮',e)
            this.visible1 = !this.visible1;
        },
        bindPickerChange(e) {
            console.log('picker发送选择改变，携带值为', e)
             this.index = e.target.value
            // this.setData({
            // index: e.detail.value
            // })
        },
        handleOk(){
            console.log('确定按钮')
            this.visible1 = !this.visible1;
        }

    }
}
</script>

<style lang="scss" scoped>
.choice-container{
    background-color: #f0f0f0;
    // height: 800px;
    .header-box{
        font-size: 16px;
        background-color: #ffffff;
        // height: 40px;
        text-align: left;
        vertical-align: middle;
        line-height: 24px;
        padding: 10px 10px;
        box-sizing: border-box;
        // border: 1px solid purple;
        .select-text{
            font-size: 14px;
            display: inline;
            text-align: left;
            vertical-align: middle;
        }

        .icon{
            // border: 1px solid red;
            display: flex;
            justify-content: right;
            width: 20px;
            height: 20px;
            image{
                height: 100%;
                width: 100%;
            }
        }
    }
    .diverter{
        height: 20px;
    }

    .list-container{
        .item{
            margin:5px 0;

            .pic{
                margin:10px 10px;
                box-sizing: border-box;
                width: 80px;
                height: 80px;

                image{
                    width:100%;
                    height: 100%;
                }
            }
            .info{
                margin-top:10px;
                font-size: 16px;
                font-weight: 700;
            }
            .desc{
                font-size: 14px;
                color:#7d7d7d;
            }
            button{
                color:#0285ed;
                border-color: #0285ed;
                // padding:0 5px;
            }
            
        }
    }
    .modal-box{
        background-color: blue;
        // height: 200px;
        padding:0;

        .picker{
            position: relative;
            font-size:16px;
            text-align: left;
            margin:2px 10px;
            text-indent: 1em;
            // line-height: 22px;
            height: 26px;
            border-bottom: 1px solid #e9e9e9;
        }
    }
}
</style>


